<template>
  <div>

    <div class="container">
      <div style="padding: 0px 30px;">
        <!-- 头部  首页设置首页 -->
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="首页设置" name="1">
            <div class="tops">
              <div class="left">
                <p>控制开关</p>
                <p>
                  <span>列数：</span>
                  <el-input-number v-model="switchForLa.colNum" label="描述文字" size="mini" :min="6" :max="20" :step-strictly="stepStrictly"></el-input-number>
                </p>
                <p>
                  <span>行高：</span>
                  <el-input-number v-model="switchForLa.rowHeight" label="描述文字" size="mini" :min="1" :max="100" :step-strictly="stepStrictly"></el-input-number>
                </p>
                <p>
                  <span>移动位置：</span>
                  <el-switch v-model="switchForLa.draggable" active-color="#07799A" inactive-color="#C80010"></el-switch>
                </p>
                <p>
                  <span>尺寸调整：</span>
                  <el-switch v-model="switchForLa.resizable" active-color="#07799A" inactive-color="#C80010"></el-switch>
                </p>
                <p>
                  <el-button type="primary" @click="mainStyle" size="mini">保存首页布局</el-button>
                </p>
                <!-- <p>
                <span>verticalCompact</span>
                <el-switch
                  v-model="switchForLa.verticalCompact"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                ></el-switch>
              </p>
              <p>
                <span>margin_s</span>
                <el-input-number v-model="switchForLa.margin_s[0]" label="描述文字"></el-input-number>
                <el-input-number v-model="switchForLa.margin_s[1]" label="描述文字"></el-input-number>
              </p>
              <p>
                <span>useCssTransforms</span>
                <el-switch
                  v-model="switchForLa.useCssTransforms"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                ></el-switch>
              </p>-->
              </div>
              <div class="right">
                <span>已选功能：</span>
                <div class="top">
                  <el-button v-for="(item,index) in tempSection" v-if="item.exist&&item.sel" type="primary" plain :key="index" class="e_b" size="mini" @click="sel('selected',item)">{{item['subheading']?item['subheading']:item['name']}}</el-button>
                </div>
                <span>未选功能：</span>
                <div class="bottom">
                  <el-button v-for="(item,index) in tempSection" v-if="item.exist&&item.uns" type="danger" plain :key="index" class="e_b" size="mini" @click="sel('unselected',item)">{{item['subheading']?item['subheading']:item['name']}}</el-button>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <!-- 中间  首页方框显示 -->
      <div class="all">
        <index-j v-if="indexWaterArrs"></index-j>
        <!-- {{selected}} -->
        <!-- {{switchForLa}} -->
        <!-- 网格初始化布局  数组  :layout.sync="layout" -->
        <!-- :col-num="12" 表示网格有多少列 -->
        <!-- :row-height="30" 表示一行的高度(以像素为单位) 数字 -->
        <!-- :maxRows="20" 表示网格中最大行数  数字 -->
        <!-- :is-draggable="true" 表示网格项数是否可以拖动 Boolean -->
        <!-- :is-resizable="true" 表示网格是否可以改变带大小 Boolean -->
        <!-- :is-mirrored="false" RTL/LTR 的转换 Boolean -->
        <!-- :autoSize="ture" 容器是否适应内部变化 Boolean -->
        <!-- :vertical-compact="true" 垂直方向上 是否应该紧凑布局 Boolean -->
        <!-- :margin="[10, 10]" 网格之间的边距 两个数字组成的数组 第一个数字为水平距离 第二个为垂直距离 -->
        <!-- :use-css-transforms="true" 是否使用css的transforms来排版 -->
        <!-- :responsive="false" 布局是否应响应窗口宽度 非必填 默认false 为true时 会出现一些布局错乱的问题 -->
        <!-- :breakpoints=" { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }" 布局是否应响应为响应布局定义的窗口宽度断点 -->
        <!-- :cols="{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }" 定义每个断点的列数 -->
        <!-- @layout-created="layoutCreatedEvent" 布局创建事件 -->
        <!-- @layout-before-mount="layoutBeforeMountEvent" 布局安装以前事件 -->
        <!-- @layout-mounted="layoutMountedEvent" 布局安装事件 -->
        <!-- @layout-ready="layoutReadyEvent" 布局准备活动 -->
        <!-- @layout-updated="layoutUpdatedEvent" 格子位置 大小更新 min-height:calc(100vh - 150px);  selected - 165px + 165px  min-height:10px; -->

        <!-- :layout.sync="selected" -->
        <grid-layout :autoSize="true" id="grid-layout" ref="grid-layout" :layout.sync="filterSections" class="out" :col-num="switchForLa.colNum" :row-height="switchForLa.rowHeight" :is-draggable="switchForLa.draggable" :is-resizable="switchForLa.resizable" :vertical-compact="switchForLa.verticalCompact" :margin="switchForLa.margin_s" :use-css-transforms="switchForLa.useCssTransforms" @layout-ready="layoutReadyEvent">
          <!-- <grid-layout :layout.sync="tempSection" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true" :is-mirrored="false" :vertical-compact="true" :margin="[10, 10]" :use-css-transforms="true" @layout-ready="layoutReadyEvent"> -->

          <!-- <section > -->

          <!-- 任务监控     v-if="item.exist&&item.sel"-->
          <!-- :x="layoutData[0].x"  横向距离 -->
          <!-- :y="layoutData[0].y"  纵向距离 -->
          <!-- :w="layoutData[0].w"  宽度 -->
          <!-- :h="layoutData[0].h"  高度 -->
          <!-- :i="layoutData[0].i"  唯一值 （重复时设置会导致一块放大或缩小）string类型 -->
          <!-- @resize="resizeEvent"  当该元素 被放大缩小触发的事件 -->
          <!-- @move="moveEvent"  该元素移动时 触发的事件 -->
          <!-- @resized="resizedEvent"  放大缩小结束 触发事件 注意:必须当大小相对上一次发生改变结束时才会触发 -->
          <!-- @moved="movedEvent"  移动结束触发 注意:只有当位置相对上一次发生改变才会触发  -->

          <grid-item v-for="(item,index) in filterSections" :key="item.i" :class="{layout:true,backgrounds:(switchForLa.draggable||switchForLa.resizable)}" :x="item.x" :y="item.y" :w="item.w " :h="item.h " :i="item.i" @resized="resizedEvent">

            <div class="grid_item_list" v-if="item.exist && item.sel">
              <!-- 方框头部信息 -->
              <div class="top">
                <div :class="(switchForLa.draggable||switchForLa.resizable)?'no-front':'front'"></div>
                <div class="tit">{{item['subheading']?item['subheading']:item['name']}}</div>
                <div v-show="item.name=='任务计划'">
                  <span>今日</span>
                  <span>本周</span>
                  <span>本月</span>
                </div>
                <div v-show="item.name=='财务统计'">
                  <!-- <el-button round type="primary" circle size="mini" @click="financialStatisticsClick('1')">月</el-button> -->
                  <!-- <el-button :type="financialStatisticsType == '1'?'primary' : ''" round size="mini" @click="financialStatisticsClick('1')" style="backgroundColor:#0B9AC3;margin:6px 0px 6px 0px" :style="financialStatisticsStyle('month')">月</el-button> -->
                  <!-- <el-button :type="financialStatisticsType == '2'?'primary' : ''" round size="mini" @click="financialStatisticsClick('2')" style="backgroundColor:#0B9AC3;margin:6px 0px 6px 0px" :style="financialStatisticsStyle('year')">年</el-button> -->
                  <el-button @click="financialStatisticsType='1'" round size="mini" :style="financialStatisticsType=='1'?'backgroundColor:#0B9AC3;margin:6px 0px 6px 0px;color:#fff':'backgroundColor:white;border: 1px solid #fff'">月</el-button>
                  <el-button @click="financialStatisticsType='2'" round size="mini" :style="financialStatisticsType=='2'?'backgroundColor:#0B9AC3;margin:6px 0px 6px 0px;color:#fff':'backgroundColor:white;border: 1px solid #fff'">年</el-button>
                </div>
                <div v-show="item.name=='发票统计'">
                  <!-- <el-button :type="invoiceStatisticsType == '月'?'primary' : ''" round size="mini" @click="invoiceStatisticsClick('月')" style="backgroundColor:#0B9AC3;margin:6px 0px 6px 0px" :style="invoiceStatisticsTypeStyle('month')">月</el-button>
                  <el-button :type="invoiceStatisticsType == '年'?'primary' : ''" round size="mini" @click="invoiceStatisticsClick('年')" style="backgroundColor:#0B9AC3;margin:6px 0px 6px 0px" :style="invoiceStatisticsTypeStyle('year')">年</el-button> -->
                  <el-button @click="invoiceStatisticsType='月'" round size="mini" :style="invoiceStatisticsType=='月'?'backgroundColor:#0B9AC3;margin:6px 0px 6px 0px;color:#fff':'backgroundColor:white;border: 1px solid #fff'">月</el-button>
                  <el-button @click="invoiceStatisticsType='年'" round size="mini" :style="invoiceStatisticsType=='年'?'backgroundColor:#0B9AC3;margin:6px 0px 6px 0px;color:#fff':'backgroundColor:white;border: 1px solid #fff'">年</el-button>
                </div>

                <div v-show="item.name=='缴费方式'">
                  <el-button @click="payCostStatisticsType='0'" round size="mini" :style="payCostStatisticsType=='0'?'backgroundColor:#0B9AC3;margin:6px 0px 6px 0px;color:#fff':'backgroundColor:white;border: 1px solid #fff'">日</el-button>
                  <el-button @click="payCostStatisticsType='1'" round size="mini" :style="payCostStatisticsType=='1'?'backgroundColor:#0B9AC3;margin:6px 0px 6px 0px;color:#fff':'backgroundColor:white;border: 1px solid #fff'">月</el-button>
                  <el-button @click="payCostStatisticsType='2'" round size="mini" :style="payCostStatisticsType=='2'?'backgroundColor:#0B9AC3;margin:6px 0px 6px 0px;color:#fff':'backgroundColor:white;border: 1px solid #fff'">年</el-button>
                  <!-- <el-button type="primary" round size="mini" :style="invoiceStatisticsType=='0'?'backgroundColor:#0B9AC3;margin:6px 0px 6px 0px':'backgroundColor:white'"  @click="payCostStatisticsClick='0'">日</el-button>
                  <el-button type="primary" round size="mini" :style="invoiceStatisticsType=='1'?'backgroundColor:#0B9AC3;margin:6px 0px 6px 0px':'backgroundColor:white'"  @click="payCostStatisticsClick='1'">月</el-button>
                  <el-button type="primary" round size="mini" :style="invoiceStatisticsType=='2'?'backgroundColor:#0B9AC3;margin:6px 0px 6px 0px':'backgroundColor:white'"  @click="payCostStatisticsClick='2'">年</el-button> -->
                </div>

                <!-- <div>11</div> -->
              </div>

              <!-- 抄表员抄表率 -->
              <div class="inner" v-if="item.i=='1'">
                <meterReader ref="meterReader"></meterReader>
              </div>

              <!-- 常用工具/历史足迹 抄表功能4-->
              <div class="inner" v-if="item.i=='5'" v-loading="CommonToolsLoading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
                <CommonTools :HistoricalStepData="HistoricalStepData"></CommonTools>
              </div>
              <!-- 订阅消息 抄表功能5-->
              <div class="inner" v-if="item.i=='6'">
                <SubscribeToNews></SubscribeToNews>
              </div>
              <!-- 营收概况 抄表功能7-->
              <div class="inner" v-if="item.i=='9'">
                <RevenueProfile></RevenueProfile>
              </div>
              <!-- item.name=='欠费前十'&&item.subheading=='现场水表监控'  抄表功能8-->
              <div class="inner" v-if="item.i=='10'">
                <onSiteWaterMeterMonitoring></onSiteWaterMeterMonitoring>
              </div>
              <!-- 设备统计 抄表功能10-->
              <div class="inner" v-if="item.i=='12'">
                <DeviceStatistics ref="DeviceStatistics"></DeviceStatistics>
              </div>
              <!-- 集中器统计 抄表功能29-->
              <div class="inner" v-if="item.i=='29'">
                <ConcentratorStatistics ref="concentratorStatistics"></ConcentratorStatistics>
              </div>
              <!-- 抄表统计 抄表功能30-->
              <div class="inner" v-if="item.i=='30'">
                <ReadMeterStatistics ref="readMeterStatistics"></ReadMeterStatistics>
              </div>
              <!-- NB表和集中器每天 抄表率功能32-->
              <div class="inner" v-if="item.i=='32'">
                <NbConcent :oCzHisRead="oCzHisRead" ref="NbConcent" />
              </div>
              <!-- 月用量统计 抄表功能31-->
              <div class="inner" v-if="item.i=='31'">
                <MonthUsingStatistics ref="monthUsingStatistics"></MonthUsingStatistics>
              </div>

              <!-- 销售分析 抄表功能6-->
              <div class="inner" v-if="item.i=='8'">
                <SalesAnalysis ref="salesAnalysis"></SalesAnalysis>
              </div>
              <!-- 水量热力图 抄表功能9-->
              <div class="inner" v-if="item.i=='11'">
                <UserHot></UserHot>
              </div>
              <!-- 用水量分析 好像是  最近十二个月用水量   抄表功能3-->
              <!-- <div id="one" class="inner" v-if="item.i=='1'"></div> -->
              <!-- <div id="one" class="inner" v-if="item.i=='2'"> -->
              <div id="one" class="inner" v-if="item.i=='2'">
                <UseWater id="UseWater" ref="UseWater" :view-height="item.h" :view-width="item.w"></UseWater>
              </div>
              <!-- item.name=='任务监控'&&item.subheading=='租户信息统计' 抄表功能1-->
              <div class="inner" v-if="item.i=='0'" v-loading="missionControlLoading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
                <missionControl :alldata="item" :getFindByStatusData="getFindByStatusData"></missionControl>
              </div>
              <!-- item.name=='整体关系图'&&item.subheading=='整体租户管理图' 抄表功能11-->
              <div class="inner" v-if="item.i=='15'" v-loading="OverallRelationshipLoading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
                <OverallRelationship style="overflow:hidden" ref="overallRelationship" v-if="ByrelatData['categories']['length']" :ByrelatData="ByrelatData"></OverallRelationship>
              </div>
              <!-- item.name=='客户分布图'&&item.subheading=='租户分布图'  抄表功能12-->
              <div class="inner" v-if="item.i=='19'" v-loading="DistributionOfCustomerLoading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
                <DistributionOfCustomer :baseTenantIn="baseTenantIn" :iteh="item.h" :itew="item.w"></DistributionOfCustomer>
              </div>
              <!-- item.name=='平台监控'&&item.subheading=='平台最新日志'   抄表功能13-->
              <div class="inner" v-if="item.i=='20'" v-loading="PlatformMonitoringLoading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
                <PlatformMonitoring :PlatformMonitorData="PlatformMonitorData"></PlatformMonitoring>
              </div>
              <!-- item.name=='定时服务'&&item.subheading=='定时任务运行监控' 抄表功能14-->
              <div class="inner" v-if="item.i=='21'" v-loading="RegularServiceLoading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
                <RegularService :RegularServiceData="RegularServiceData"></RegularService>
              </div>
              <!-- 用户统计-->
              <div class="inner" v-if="item.i=='23'">
                <userStatistics></userStatistics>
              </div>

              <!-- 财务统计-->
              <div class="inner" v-if="item.i=='24'">
                <financialStatistics :financialStatisticsType='financialStatisticsType'></financialStatistics>
              </div>
              <!-- 发票统计-->
              <div class="inner" v-if="item.i=='25'">
                <invoiceStatistics :invoiceStatisticsType='invoiceStatisticsType'></invoiceStatistics>
              </div>
              <!-- 欠费统计-->
              <div class="inner" v-if="item.i=='26'">
                <lackOfStatistical></lackOfStatistical>
              </div>
              <!-- 缴费方式-->
              <div class="inner" v-if="item.i=='22'">
                <payCostStatistics :payCostStatisticsType='payCostStatisticsType' ref="payCostStatisticsType"></payCostStatistics>
              </div>
              <!-- 水量统计-->
              <div class="inner" v-if="item.i=='27'" style="font-size: 20px;">
                <theAmountOfWaterStatistics ref="theAmountOfWaterStatistics"></theAmountOfWaterStatistics>
              </div>
              <!-- 营收统计-->
              <div class="inner" v-if="item.i=='28'">
                <revenueStatistics ref="revenueStatistics"></revenueStatistics>
              </div>
              <!-- 水表统计-->
              <div class="inner" v-if="item.i=='33'">
                <waterStatistics></waterStatistics>
              </div>

            </div>
          </grid-item>
          <!-- </section> -->
        </grid-layout>
      </div>
      <!-- ----------------show------------------- -->
      <!-- <div v-for="(item,index) in selected" :key="index*10">{{item}}</div> -->
    </div>
  </div>
</template>
<script>
// import $ from jquery
import { findByUserId, ugridPdate, flSwitchforla } from 'api/login'

import {
  getFindByrelation,
  getFindByStatus,
  baseTenantInformation,
  getHistoricalStep,
  getFindLog,
  getFindInformation,
} from 'api/dashboard'
import VueGridLayout from 'vue-grid-layout'
import echarts from 'echarts'
//引入组件
import {
  missionControl,
  meterReader,
  TaskClassification,
  TaskPlanning,
  BasicRadarChart,
  Map,
  CommonTools,
  SubscribeToNews,
  InformationBulletin,
  lifetime,
  RevenueProfile,
  ArrearageTopTen,
  DeviceStatistics,
  SalesAnalysis,
  WaterYield,
  DataStatistic,
  OverallRelationship,
  OrderInformation,
  EquipmentInformationStatistics,
  FieldFaultInformation,
  DistributionOfCustomer,
  PlatformMonitoring,
  RegularService,
  FeeAnalysis,
  UseWater, //用水量分析图
  UserHot, //用水量热力图
  YearCb, //抄表率统计图
  onSiteWaterMeterMonitoring, //现场水表监控
  ConcentratorStatistics, //集中器在线离线统计
  ReadMeterStatistics, //抄表统计
  MonthUsingStatistics, //月用量统计
  // payCostStatistics, //缴费方式
} from './UtilityGadget' //引入组件
import NbConcent from './UtilityGadget/NbConcent' // NB和集中器每天抄表率 from ''
import indexJ from '../indexJ/index.vue' // NB和集中器每天抄表率 from ''
import {
  userStatistics, //用户统计
  // waterStatistics, //水表统计
  financialStatistics, //财务统计
  invoiceStatistics, //发票统计
  lackOfStatistical, //欠费统计
  payCostStatistics, //缴费方式
  theAmountOfWaterStatistics, //水量统计
  revenueStatistics, //营收统计
} from './revenueEcharts'
import waterStatistics from './revenueEcharts/waterStatistics.vue'
// 营收系统  引入组件
// import lifetime from './UtilityGadget/lifetime'
export default {
  components: {
    indexJ: indexJ,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    missionControl,
    meterReader,
    TaskClassification,
    TaskPlanning,
    BasicRadarChart,
    Map,
    CommonTools,
    SubscribeToNews,
    InformationBulletin,
    lifetime,
    RevenueProfile,
    ArrearageTopTen,
    DeviceStatistics,
    SalesAnalysis,
    WaterYield,
    DataStatistic,
    OverallRelationship,
    OrderInformation,
    EquipmentInformationStatistics,
    FieldFaultInformation,
    DistributionOfCustomer,
    PlatformMonitoring,
    RegularService,
    FeeAnalysis,
    UseWater, //用水量分析图
    UserHot, //用水量热力图
    YearCb, //抄表率统计图
    onSiteWaterMeterMonitoring, //现场水表监控
    userStatistics, //用户统计
    waterStatistics, // 水表统计
    financialStatistics, //财务统计
    invoiceStatistics, //发票统计
    lackOfStatistical, //欠费统计
    payCostStatistics, //缴费方式
    theAmountOfWaterStatistics, //水量统计
    revenueStatistics, //营收统计
    ConcentratorStatistics, //集中器在线离线统计
    ReadMeterStatistics, //抄表统计
    MonthUsingStatistics, //月用量统计
    NbConcent, // NB和集中器每天抄表率
  },
  computed: {
    indexWaterArrs() {
      return this.indexWaterArr.length
    },
    filterSections() {
      return this.tempSection.filter((item) => item.exist && item.sel)
    },
  },

  created() {
    this.oCzHisRead =
      (this.$store.state.user.menus.hasOwnProperty('flWaterMeterHisRead') &&
        this.$store.state.user.menus.flWaterMeterHisRead) ||
      false
    console.log('55566', this.$store.state.user.menus.historyReading)

    this.jcToIndex =
      this.$store.state.user.elements['flAbnormalMessage:btn_index']
    // if (this.jcToIndex) this.$router.push({ path: '/index' })

    // let loginForm = new FormData()
    // loginForm.append('username', 'sunxiangyu123')
    // loginForm.append('password', 'sunxiangyu123')
    // this.$store
    //   .dispatch("LoginByEmail", loginForm)
    //   .then(() => {
    //     this.loading = false;
    //     this.$router.push({
    //       path: "/"
    //     });
    //   })
    // 根据用户的id  获取该用户的三个信息  已选择的功能  未选择的功能  控制开关信息
    let userId = this.$store.state.user.id
    findByUserId(userId).then((Response) => {
      console.log(Response, 35789)
      let { data = [] } = Response
      if (!data.length) return
      this.indexWaterArr =
        data[0].length && data[0].filter((item) => item.buttonId == 100)

      // 已选择的功能    两个数组  i唯一值和id进行对比   此处可优化
      // console.log(Response.data[0],this.selected,665);
      for (let i = 0; i < Response.data[0].length; i++) {
        for (let j = 0; j < this.selected.length; j++) {
          //通过返回值和this.selected做比对实现的****
          if (Response.data[0][i] != 100) {
            if (this.selected[j].i == Response.data[0][i].buttonId) {
              let sel = this.selected[j]
              let res = Response.data[0][i]
              sel.x = res.x
              sel.y = res.y
              sel.w = res.w
              sel.h = res.h
              sel['id'] = res.id
              sel['buttonId'] = res.buttonId
              sel.exist = true //是否存在？是
              sel.sel = true //是否存在已选择中？是
              sel.uns = false //是否存在为选择中？否

              this.tempSection.push(sel)
            }
          }
        }
      }
      // 未选择的功能
      for (let i = 0; i < Response.data[1].length; i++) {
        for (let j = 0; j < this.selected.length; j++) {
          if (this.selected[j].i == Response.data[1][i].buttonId) {
            let sel = this.selected[j]
            let res2 = Response.data[1][i]
            sel.x = res2.x
            sel.y = res2.y
            sel.w = res2.w
            sel.h = res2.h
            sel['id'] = res2.id
            sel['buttonId'] = res2.buttonId
            sel.exist = true //是否存在？是
            sel.sel = false //是否存在已选择中？是
            sel.uns = true //是否存在为选择中？否
            this.tempSection.push(sel)
          }
        }
      }
      console.log(
        '最后结果--',
        this.selected,
        '筛选后的结果',
        this.tempSection.filter((item) => item.exist && item.sel)
      )

      // 控制开关信息记录
      this.switchForLa.colNum = Response.data[2][0].colnum
      this.switchForLa.rowHeight = Response.data[2][0].rowheight
    })
    //租户分布图
    let userMainId = this.$store.state.user.id
    baseTenantInformation(userMainId).then((Response) => {
      this.baseTenantIn = Response.data
      setTimeout(() => {
        this.DistributionOfCustomerLoading = false
      }, 1000)
    })

    //4.1.1.3 常用功能/历史足迹
    getHistoricalStep(userMainId).then((Response) => {
      this.HistoricalStepData = Response.data
      setTimeout(() => {
        this.CommonToolsLoading = false
      }, 1000)
    })
    //平台最新日志
    getFindLog().then((Response) => {
      this.PlatformMonitorData = Response.data
      setTimeout(() => {
        this.PlatformMonitoringLoading = false
      }, 1000)
    })
    //定时任务运行监控 getFindByStatus
    getFindByStatus().then((Response) => {
      this.RegularServiceData = Response.data
      setTimeout(() => {
        this.RegularServiceLoading = false
      }, 1000)
    })
    //租户信息统计
    getFindInformation().then((Response) => {
      this.getFindByStatusData = Response.data
      setTimeout(() => {
        this.missionControlLoading = false
      }, 1000)
    })
    //整体租户管理图
    getFindByrelation().then((Response) => {
      let rdata = Response.data
      let categories = []
      let nodes = []
      let links = []
      rdata[0].forEach((val) => {
        let obj = {}
        let obj2 = {}
        obj['name'] = val['name']
        obj['keyword'] = {}
        obj['base'] = '网格关系'
        categories.push(obj)

        obj2['name'] = val['name']
        obj2['id'] = val['id']
        switch (val['type']) {
          case 1:
            obj2['symbolSize'] = 40
            break
          case 2:
            obj2['symbolSize'] = 30
            break
          case 3:
            obj2['symbolSize'] = 20
            break
          case 4:
            obj2['symbolSize'] = 10
            break
        }
        // if (val["type"] == 1) {
        //   obj2["symbolSize"] = 40;
        // }
        // else{
        //   obj2["symbolSize"] = 10;
        // }

        obj2['category'] = val['type']
        nodes.push(obj2)
      })
      rdata[1].forEach((val) => {
        let obj3 = {}
        obj3['source'] = val['parentId']
        obj3['target'] = val['childrenId']
        links.push(obj3)
      })
      this.ByrelatData.categories = categories
      this.ByrelatData.nodes = nodes
      this.ByrelatData.links = links
      console.log('$$$$$$$$$$$$$$$$$$$$$$$$')
      console.log(categories, nodes, links)
      console.log('$$$$$$$$$$$$$$$$$$$$$$$$')
      setTimeout(() => {
        this.OverallRelationshipLoading = false
      }, 1000)
    })
  },

  watch: {
    tempSection: {
      // tempSection
      handler(newValue, oldValue) {
        // console.log("——————————————————深度监听————————————————————");
        console.log(newValue)
        // let obj=this.newValue
        let arrExist = []
        for (let i = 0; i < newValue.length; i++) {
          newValue[i]['user_id'] = this.$store.state.user.id
          if (newValue[i]['exist'] == true && newValue[i]['sel'] == true) {
            newValue[i]['status'] = 1
            newValue[i]['button_id'] = newValue[i]['buttonId']
            arrExist.push(newValue[i])
          } else if (
            newValue[i]['exist'] == true &&
            newValue[i]['uns'] == true
          ) {
            newValue[i]['status'] = 0
            newValue[i]['button_id'] = newValue[i]['buttonId']
            arrExist.push(newValue[i])
          }
        }
        this.keeps = arrExist
        // console.log(arrExist);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      tempSection: [],
      waterNoN: '',
      indexWaterArr: [],
      jcToIndex: false,
      stepStrictly: true,
      oCzHisRead: false,
      //财务统计请求类型
      financialStatisticsType: '1',
      //发票统计请求类型
      invoiceStatisticsType: '月',
      // 缴费记录请求类型
      payCostStatisticsType: '1',
      //加载
      CommonToolsLoading: true, //常用工具/历史足迹
      missionControlLoading: true, //租户信息统计
      DistributionOfCustomerLoading: true, //租户分布图
      PlatformMonitoringLoading: true, //平台最新日志
      RegularServiceLoading: true, //定时任务运行监控
      OverallRelationshipLoading: true, //整体租户管理图
      ByrelatData: {
        categories: [],
        nodes: [],
        links: [],
      },
      //
      getFindByStatusData: {},
      //
      RegularServiceData: {},
      //平台监控(最新平台日志)
      PlatformMonitorData: [],
      //常用工具/历史足迹data
      HistoricalStepData: [],
      //
      OverallRelationshipData: [], //整体关系图接口数据
      //折叠面板
      activeNames: [],
      //主页保存数据
      keeps: [],
      //实验组
      syz: [],
      selecteds: [
        {
          name: '任务监控',
          subheading: '租户信息统计',
          x: 8,
          y: 4,
          w: 0,
          h: 8,
          i: '0',
          Y_w: 4,
          Y_h: 4,
          exist: true,
          sel: true,
          uns: true,
        },
        {
          name: '任务分类',
          subheading: '抄表员完成率',
          x: 0,
          y: 8,
          w: 0,
          h: 8,
          Y_w: 4,
          Y_h: 4,
          i: '1',
          exist: true,
          sel: true,
          uns: true,
        },
        {
          name: '用水量',
          subheading: '最近12个月用水量',
          x: 2,
          y: 8,
          w: 0,
          h: 8,
          Y_w: 4,
          Y_h: 4,

          i: '2',

          exist: true,
          sel: true,
          uns: true,
        },
        {
          name: '常用功能',
          x: 6,
          y: 0,
          w: 0,
          h: 8,
          Y_w: 4,
          Y_h: 4,
          i: '5',
          exist: true,
          sel: true,
          uns: true,
        },

        {
          name: '订阅消息',
          x: 2,
          y: 0,
          w: 0,
          h: 8,
          Y_w: 4,
          Y_h: 4,
          i: '6',
          exist: true,
          sel: true,
          uns: true,
        },
        {
          name: '销售分析',
          x: 4,
          y: 0,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '8',
          exist: true,
          sel: true,
          uns: true,
        },
        // {
        //   name: "个人KPI",
        //   x: 4,
        //   y: 0,
        //   w: 5,
        //   h: 10,
        //   i: "3",
        //   Y_w: 5,
        //   Y_h: 10,
        //   exist: false,
        //   sel: false,
        //   uns: false
        // },
        // {
        //   name: "抄表路线图",
        //   x: 4,
        //   y: 10,
        //   w: 5,
        //   h: 8,
        //   i: "4",
        //   Y_w: 5,
        //   Y_h: 8,
        //   exist: false,
        //   sel: false,
        //   uns: false
        // },
        // {
        //   name: "信息公告",
        //   subheading: "抄表率统计",
        //   x: 9,
        //   y: 12,
        //   w: 3,
        //   h: 6,
        //   i: "7",
        //   Y_w: 3,
        //   Y_h: 6,
        //   exist: false,
        //   sel: false,
        //   uns: false
        // },
        // {
        //   name: "设备寿终提醒",
        //   x: 8,
        //   y: 27,
        //   w: 0,
        //   h: 8,
        //   i: "13",
        //   Y_w: 4,
        //   Y_h: 8,
        //   exist: false,
        //   sel: false,
        //   uns: false
        // },
        // {
        //   name: "数据统计",
        //   x: 0,
        //   y: 18,
        //   w: 0,
        //   h: 8,
        //   i: "14",
        //   Y_w: 4,
        //   Y_h: 8,
        //   exist: false,
        //   sel: false,
        //   uns: false
        // },
        // {
        //   name: "订单信息",
        //   x: 0,
        //   y: 47,
        //   w: 0,
        //   h: 9,
        //   i: "16",
        //   Y_w: 4,
        //   Y_h: 9,
        //   exist: false,
        //   sel: false,
        //   uns: false
        // },
        // {
        //   name: "设备信息统计",
        //   x: 0,
        //   y: 38,
        //   w: 0,
        //   h: 9,
        //   i: "17",
        //   Y_w: 4,
        //   Y_h: 9,
        //   exist: false,
        //   sel: false,
        //   uns: false
        // },
        // {
        //   name: "现场故障信息",
        //   x: 4,
        //   y: 27,
        //   w: 0,
        //   h: 9,
        //   i: "18",
        //   Y_w: 4,
        //   Y_h: 9,
        //   exist: false,
        //   sel: false,
        //   uns: false
        // },
        // {
        //   name: "收费方式分析",
        //   x: 8,
        //   y: 100,
        //   w: 0,
        //   h: 9,
        //   i: "22",
        //   Y_w: 4,
        //   Y_h: 9,
        //   exist: false,
        //   sel: false,
        //   uns: false
        // }
      ],
      //已选择的
      selected: [
        {
          name: '常用功能',
          x: 0,
          y: 0,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '5',
          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '订阅消息',
          x: 2,
          y: 0,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '6',
          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '销售分析',
          x: 4,
          y: 0,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '8',
          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '营收概况',
          x: 6,
          y: 0,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '9',
          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '设备统计',
          x: 8,
          y: 0,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '12',
          exist: false,
          sel: false,
          uns: false,
        },

        {
          name: '客户分布图',
          subheading: '租户分布图',
          x: 0,
          y: 4,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '19',
          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '欠费前十',
          subheading: '现场水表监控',
          x: 2,
          y: 4,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '10',
          exist: false,
          sel: false,
          uns: false,
        },

        {
          name: '定时任务运行监控',
          subheading: '定时任务运行监控',
          x: 4,
          y: 4,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '21',

          exist: false,
          sel: false,
          uns: false,
        },

        {
          name: '平台监控',
          subheading: '平台最新日志',
          x: 6,
          y: 4,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '20',
          exist: false,
          sel: false,
          uns: false,
        },

        {
          name: '任务监控',
          subheading: '租户信息统计',
          x: 8,
          y: 4,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '0',
          exist: false,
          sel: false,
          uns: false,
        },

        {
          name: '整体关系图',
          subheading: '整体租户管理图',
          x: 10,
          y: 4,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '15',
          exist: false,
          sel: false,
          uns: false,
        },

        {
          name: '任务分类',
          subheading: '抄表员完成率',
          x: 0,
          y: 8,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '1',
          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '用水量',
          subheading: '最近12个月用水量',
          x: 2,
          y: 8,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '2',
          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '缴费方式',
          x: 4,
          y: 8,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '22',
          exist: false,
          sel: false,
          uns: false,
        },

        {
          name: '用户统计',
          x: 6,
          y: 8,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '23',

          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '财务统计',
          x: 8,
          y: 8,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '24',

          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '发票统计',
          x: 10,
          y: 8,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '25',

          exist: false,
          sel: false,
          uns: false,
        },

        {
          name: '欠费统计',
          x: 0,
          y: 12,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '26',

          exist: false,
          sel: false,
          uns: false,
        },

        {
          name: '水量统计',
          // name: "近12个月水量统计",
          x: 2,
          y: 12,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '27',

          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '营收统计',
          // name: "近12个月营收统计",
          x: 4,
          y: 12,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '28',

          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '集中器统计',
          // name: "近12个月营收统计",
          x: 6,
          y: 12,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '29',

          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '抄表统计',
          // name: "近12个月营收统计",
          x: 8,
          y: 12,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '30',

          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '日用量统计',
          // name: "近12个月营收统计",
          x: 10,
          y: 12,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '31',

          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: 'NB表和集中器抄表率',
          x: 0,
          y: 16,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '32',

          exist: false,
          sel: false,
          uns: false,
        },
        {
          name: '水表统计',
          x: 2,
          y: 16,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '33',

          exist: false,
          sel: false,
          uns: false,
        },

        {
          name: '水量热力图',
          x: 0,
          y: 20,
          w: 0,
          h: 2,
          Y_w: 4,
          Y_h: 4,
          i: '11',
          exist: false,
          sel: false,
          uns: false,
        },
      ],
      //方块的长宽
      // squareHeightWidth:{
      //   'one':{height:0,width:0},
      // },
      //未选择的
      unselected: [],
      // //测试瀑布数据
      //瀑布流开关
      switchForLa: {
        colNum: 12, //列数 12
        rowHeight: 30, //行高 30
        draggable: false, //可移动/不可移动
        resizable: false, //可调整大小/不可调整大小
        verticalCompact: true,
        margin_s: [10, 10],
        useCssTransforms: true,
      },
      //客户分布图数据 租户分布图数据
      baseTenantIn: [],
    }
  },
  mounted() {
    const dom = document.getElementById('grid-layout')
    setTimeout(() => {
      console.log('获取元素高度-', dom.clientHeight, '==', dom.style.height)
      dom.style.height = dom.clientHeight + 0 + 'px'
    }, 1000)
    dom.style.marginTop = 0 + 'px' // 80
  },
  methods: {
    // 财务统计切换
    financialStatisticsClick(type) {
      this.financialStatisticsType = type
    },
    // 发票统计切换
    invoiceStatisticsClick(type) {
      this.invoiceStatisticsType = type
    },
    // 缴费记录统计切换
    payCostStatisticsClick(type) {
      console.log(type, 663)
      this.payCostStatisticsType = type
    },
    //保存界面
    mainStyle() {
      //ugridPdate userId,buttonId
      console.log('保存', this.keeps)
      if (this.keeps.length > 0) {
        ugridPdate(this.keeps)
          .then((Response) => {
            console.log(Response)
            this.$message({
              message: '保存成功！',
              type: 'success',
            })
          })
          .catch(() => {
            this.$message.error('保存失败！')
          })

        let id = this.$store.state.user.id
        let obj = {
          userId: id,
          colnum: this.switchForLa.colNum,
          rowheight: this.switchForLa.rowHeight,
        }
        flSwitchforla(id, obj)
          .then((Response) => {
            console.log(Response)
          })
          .catch(() => {
            console.log('列数/行高接口出错！')
          })
      }
    },
    // 布局准备活动
    layoutReadyEvent(e, a) {
      console.log('layout初始化', e, a)
    },
    // 放大缩小结束 触发事件 注意:必须当大小相对上一次发生改变结束时才会触发
    async resizedEvent(i, x, y, height, width) {
      switch (i) {
        case '2':
          await this.$refs.UseWater[0].changeHeightWidth(i, x, y, height, width)
          console.log('用水分析-UseWater', i, x, y, height, width)
          break
        case '12':
          await this.$refs.DeviceStatistics[0].changeHeightWidth(
            i,
            x,
            y,
            height,
            width
          )
          console.log('设备管理-DeviceStatistics', i, x, y, height, width)
          break
        case '22':
          await this.$refs.payCostStatisticsType[0].changeHeightWidth(
            i,
            x,
            y,
            height,
            width
          )
          console.log('缴费-payCostStatisticsType', i, x, y, height, width)
          break
        case '29':
          await this.$refs.concentratorStatistics[0].changeHeightWidth(
            i,
            x,
            y,
            height,
            width
          )
          console.log(
            '集中器统计-concentratorStatistics',
            i,
            x,
            y,
            height,
            width
          )
          break
        case '30':
          await this.$refs.readMeterStatistics[0].changeHeightWidth(
            i,
            x,
            y,
            height,
            width
          )
          console.log('抄表统计-readMeterStatistics', i, x, y, height, width)
          break
        case '8':
          await this.$refs.salesAnalysis[0].changeHeightWidth(
            i,
            x,
            y,
            height,
            width
          )
          console.log('销售统计-salesAnalysis', i, x, y, height, width)
          break
        case '15':
          await this.$refs.overallRelationship[0].changeHeightWidth(
            i,
            x,
            y,
            height,
            width
          )
          console.log('关系租户-overallRelationship', i, x, y, height, width)
          break
        case '27':
          await this.$refs.theAmountOfWaterStatistics[0].changeHeightWidth(
            i,
            x,
            y,
            height,
            width
          )
          console.log(
            '水量统计-theAmountOfWaterStatistics',
            i,
            x,
            y,
            height,
            width
          )
          break
        case '28':
          await this.$refs.revenueStatistics[0].changeHeightWidth(
            i,
            x,
            y,
            height,
            width
          )
          console.log('营收统计-revenueStatistics', i, x, y, height, width)
          break
        case '31':
          await this.$refs.monthUsingStatistics[0].changeHeightWidth(
            i,
            x,
            y,
            height,
            width
          )
          console.log('日用量统计-monthUsingStatistics', i, x, y, height, width)
          break
        case '32':
          await this.$refs.NbConcent[0].changeHeightWidth(
            i,
            x,
            y,
            height,
            width
          )
          console.log('集中器统计-NbConcent', i, x, y, height, width)
          break
        case '1':
          await this.$refs.meterReader[0].changeHeightWidth(
            i,
            x,
            y,
            height,
            width
          )
          console.log('抄表率统计-meterReader', i, x, y, height, width)
          break
      }
    },
    //头部选择器  点击已选功能  未选功能中的 按钮的时候触发的事件
    sel(val, item) {
      console.log(val)
      if (val == 'selected') {
        // 点击‘已选功能’的时候，selected删掉对应的list,unselected再加上这个list
        console.log('选择', item)

        let newObj = item
        newObj.sel = false
        newObj.uns = true
        newObj.w = 0
        newObj.h = 0
        for (let i = 0; i < this.tempSection.length; i++) {
          if (this.tempSection[i].name === item.name) {
            console.log(this.tempSection, 99995)
            this.$set(this.tempSection, i, newObj)
          }
        }
      } else if (val == 'unselected') {
        let newObj2 = item
        newObj2.sel = true
        newObj2.uns = false
        console.log('不选择-', newObj2)

        newObj2.w = item.Y_w || 4
        newObj2.h = item.Y_h || 4
        for (let i = 0; i < this.tempSection.length; i++) {
          if (this.tempSection[i].name === item.name) {
            this.$set(this.tempSection, i, newObj2)
          }
        }
      }
    },
    handleChange(val) {},
  },
}
</script>
<style lang="scss" scoped>
div .main-container {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  /deep/.vue-grid-layout {
  }
}
html {
  height: 100%;
}
.tops {
  // padding-left: 10px;
  width: 100%;
  display: flex;
  .left {
    flex: 1;
    // padding: 0px 20px;
  }
  .right {
    flex: 3;
    .top {
      min-height: 100px;
      border: 1px #20a0ff dashed;
      border-radius: 10px;
      .e_b {
        margin: 10px;
      }
    }
    .bottom {
      min-height: 100px;
      border: 1px #20a0ff dashed;
      border-radius: 10px;
      .e_b {
        margin: 10px;
      }
    }
  }
}

//网格List
.grid_item_list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 19px;
  .top {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    height: 36px;
    .front {
      width: 5px;
      height: 14px;
      display: inline-block;
      background: #0b9ac3;
      vertical-align: middle;
      margin: 5px;
      margin-left: 15px !important;
    }
    .no-front {
      width: 5px;
      height: 14px;
      display: inline-block;
      background: #ffffff;
      vertical-align: middle;
      margin: 5px;
    }
    .tit {
      flex: 100;
      display: block;
      height: 40px;
      line-height: 40px;
    }
    .dot {
      width: 15px;
      font-size: 20px;
      margin: 5px 10px;
      cursor: pointer;
    }
  }
  .inner {
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
    padding: 0px 15px;
  }
}
/* .out {
  border: 1px solid palevioletred;
} */
.layout {
  // transition: 0.5s;
  background: #fff;
  overflow: hidden;
  padding: 0px 5px 5px 5px;
}
.backgrounds {
  background: #07799a;
  color: #ffffff;
  // transition: 0.5s;
}
/deep/.all {
  background-color: #f2f3f5;
  height: auto !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;

  /deep/.vue-grid-laout {
    // height: auto !important;

    div {
      height: 100% !important;
      .vue-grid-item {
        padding: 0px 15px;
      }
    }
  }
}
.newrdb {
  // width: 10px;
  // height: 5px;
  border-radius: 80%;
}
</style>
